<template>
    <div>
            <el-table border ref="multipleTable" :data="linkMan" tooltip-effect="dark" style="width: 100%" @row-click="get_row_data">
            <el-table-column prop="contactId" type="selection" width="70" header-align="center" align="center"></el-table-column>
            <el-table-column prop="contactName" label="名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="customer.customerName" label="所属客户" header-align="center" align="center"></el-table-column>
            <el-table-column  label="联系人类型" header-align="center" align="center">
                <template slot-scope="s">
                  {{s.row.contactType == null?'——':s.row.contactType.contactTypeName}}
                </template>
            </el-table-column>
            <el-table-column prop="contactTel"  label="电话" header-align="center" align="center"></el-table-column>
            <el-table-column prop="contactPhone" label="手机" header-align="center" align="center"></el-table-column>
            <el-table-column prop="emailAddress" label="邮箱" header-align="center" align="center"></el-table-column>
            <el-table-column label="是否为主联系人"  header-align="center" align="center">
                <template slot-scope="s">
                    <el-checkbox  v-model="s.row.is_main == 1" @change="getFocusObject"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column  label="操作" header-align="center" align="center">
                <template slot-scope="s">
                  <el-button type="primary" size="small" icon="el-icon-edit" circle @click="editLinkMan(s.row)"></el-button>
                    <el-button type="danger" size="small"  icon="el-icon-delete" circle ></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--修改/添加联系人信息-->
        <el-dialog v-dialogDrag :visible.sync="linkman_activeVisitable" width="50%" :modal="false" :close-on-click-modal="false" class="paddchang">
            <span slot="title" class="genenal-title">联系人信息</span>
            <el-form>
                <el-tabs v-model="add_linkman_infor_activeName">
                    <el-tab-pane  name="first">
                        <span slot="label" >联系人信息</span>
                        <el-row>
                            <el-input disabled v-model="contact.customer.customerName">
                                <template slot="prepend">所属客户</template>
                                <template slot="append"  >
                                    <el-button class="iconfont icon-kehu"></el-button>
                                </template>
                            </el-input>
                        </el-row>

                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-input v-model="contact.contactName">
                                    <template slot="prepend">联系人姓名</template>
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox  v-model="mainContact" label="设为主联系人" border></el-checkbox >
                            </el-col>
                        </el-row>
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <div  class="el-input-group ">
                                    <span class="el-input-group__prepend" >联系人类型</span>
                                    <el-select v-model="contact.contactType" value-key="contactType">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option v-for="item in contactTypeData"  :key="item.contactType"  :label="item.contactTypeName" :value="item"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model="contact.position">
                                    <template slot="prepend">联系人职务</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-input v-model="contact.contactTel">
                                    <template slot="prepend">电话号码</template>
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model="contact.contactPhone">
                                    <template slot="prepend">手机号码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-input v-model="contact.emailAddress">
                                    <template slot="prepend">邮箱地址</template>
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <div class="el-input-group ">
                                    <span class="el-input-group__prepend">联系人性别</span>
                                    <el-select v-model="contact.contactSex">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option v-for="item in sex"  :key="item.sexId"  :label="item.sexName" :value="item.sexId"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <div  class="el-input-group ">
                                <span class="el-input-group__prepend" >纪念日</span>
                                <el-date-picker  v-model="contact.anniversary"  type="date" value-format="yyyy-MM-dd" >
                                </el-date-picker>
                            </div>
                        </el-row>
                        <el-row>
                            <el-input v-model="contact.contactAddress">
                                <template slot="prepend">地址</template>
                            </el-input>
                        </el-row>
                        <el-row>
                            <el-input v-model="contact.contactLable">
                                <template slot="prepend">联系人标签</template>
                            </el-input>
                        </el-row>
                        <el-form-item style="margin-top: 15px; text-align: center">
                            <el-button @click="save_contact">保存</el-button>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import  Print from "@/assets/print.js"

    export default {
        name: "linkman_table",
        props:['linkMan','home']
        ,data:function () {
            return{
                linkman_activeVisitable:false
                ,add_linkman_infor_activeName:"first"
                ,cusVisiable:false
                ,mainContact:false
                ,contact:{
                    contactId:0,
                    contactType:{
                        contactType:1,
                        contactTypeName:''
                    },
                    customer:{
                        customerName:''
                    }
                },
                cusData:'',
                sex:[{sexId:1,sexName:'男'},{sexId:2,sexName:'女'}],
                contactTypeData:[],
                cont:{},
                focusObj:{}
            }
        },
        methods:{
            //设置主联系人       obj 要关注或者要取消关注的对象
            getFocusObject(obj){
                if(obj){
                    this.cont = this.focusObj
                    this.cont.is_main = 1
                    console.log("是否为主联系人this.cont：");
                    //console.log(this.cont);
                    this.$axios.post("api/customer/add_contact",this.cont)
                        .then(() => {
                            this.$parent.$parent.$parent.get_linkman(this.home.curr_page,this.home.page_size)
                        })
                }else{
                    this.cont = this.focusObj
                    this.cont.is_main = 0
                    this.$axios.post("api/customer/add_contact",this.cont)
                        .then(() => {
                            this.$parent.$parent.$parent.get_linkman(this.home.curr_page,this.home.page_size)
                        })
                }
            },
            // 获取表格一行对象赋值给row
            get_row_data(data) {
                this.focusObj = data
                console.log("data");
                console.log(data);
            },
            //修改联系人
            editLinkMan(row){
                this.linkman_activeVisitable = true;
                this.contact = row
                if( row.is_main == 1){
                    this.mainContact = true
                }else{
                    this.mainContact = false
                }
            },
            //查询所有联系人类型
            selecAllconType(){
                this.$axios.get("api/customer/all_contact_type")
                    .then(v=>{
                        this.contactTypeData = v.data
                        console.log("联系人类型");
                        console.log(this.contactTypeData);
                    }).catch()
            },
            /*修改联系人*/
            save_contact(){
                if(this.mainContact){
                    this.contact.is_main = 1
                }else{
                    this.contact.is_main = 0
                }
                this.$axios.post("api/customer/add_contact",this.contact)
                    .then(v=>{

                    }).catch()
                this.linkman_activeVisitable = false
            }

        },
      created() {
                this.selecAllconType();
      }
    }
</script>

<style scoped>
.el-row{
        margin-top: 15px;
    }
.el-dialog__header{
        padding: 0;
        background-color: white!important;
    }
    .dialog-ul li{
        padding: 5px 5px;
        border-bottom: 1px solid lightgray;
    }
    .dialog-ul li:hover{
        color: teal;
    }
    .el-input-group .el-select{
        width: 100%!important;
    }
.el-input-group .el-date-editor{
    width: 100%!important;
}

</style>